<template>
  <div class="p2">
    <el-card class="myApps" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>请选择就诊人</span>
          <el-button link type="primary" size="default" :icon="User" @click="goUser">添加就诊人</el-button>
        </div>
      </template>
      <template #default>
        <div class="card-default">
          <Visitor @click="changeIndex(index)" v-for="(user, index) in userArr" :key="user.id" class="item" :user="user" :index="index" :currentIndex="currentIndex" />
        </div>
      </template>
      <template #footer>
        <div class="card-footer">
          <span>请选择就诊人</span>
        </div>
      </template>
    </el-card>

    <el-card class="myLink" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>挂号信息</span>
          <el-button link type="primary" size="default" :icon="User" @click="goUser">+</el-button>
        </div>
      </template>
      <template #default>
        <div class="card-default">
          <el-descriptions title="User Info">
            <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
            <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
            <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
            <el-descriptions-item label="Remarks"><el-tag size="small">School</el-tag></el-descriptions-item>
            <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
          </el-descriptions>
          <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider>
          <el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
            <template #extra>
              <el-button type="primary" icon="Edit" circle />
            </template>
            <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
            <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
            <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
            <el-descriptions-item label="Remarks"><el-tag size="small">School</el-tag></el-descriptions-item>
            <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
          </el-descriptions>
          <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider>
          <el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
            <template #extra>
              <el-button type="primary" icon="Edit" circle />
            </template>
            <el-descriptions-item><template #label><div class="cell-item"><el-icon><user /></el-icon>Username</div></template>kooriookami</el-descriptions-item>
            <el-descriptions-item><template #label><div class="cell-item"><el-icon><iphone /></el-icon>Telephone</div></template>18100000000</el-descriptions-item>
            <el-descriptions-item><template #label><div class="cell-item"><el-icon><location /></el-icon>Place</div></template>Suzhou</el-descriptions-item>
            <el-descriptions-item><template #label><div class="cell-item"><el-icon><tickets /></el-icon>Remarks</div></template><el-tag size="small">School</el-tag></el-descriptions-item>
            <el-descriptions-item><template #label><div class="cell-item"><el-icon><office-building /></el-icon>Address</div></template>No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
          </el-descriptions>
          <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊日期:</div>
              </template>
              {{ docInfo.workDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊医院:</div>
              </template>
              {{ docInfo.param?.hosname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊科室:</div>
              </template>
              {{ docInfo.param?.depname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医生姓名:</div>
              </template>
              {{ docInfo.docname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医生职称:</div>
              </template>
              {{ docInfo.title }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医生专长:</div>
              </template>
              {{ docInfo.skill }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医生服务器:</div>
              </template>
              <span style="color: red">{{ docInfo.amount }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
      <template #footer>
        <div class="card-footer">
          <span>挂号信息</span>
        </div>
      </template>
    </el-card>

    <div class="btn">
      <el-button type="primary" size="default" :disabled="currentIndex == -1 ? true : false"
        @click="submitOrder">确认挂号</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { User } from "@element-plus/icons-vue";
//引入获取就诊人信息接口
import { reqGetUser, reqDoctorInfo } from "@/api/Hospital";
import { reqSubmitOrder } from "@/api/Member";
import type { SubmitOrder } from "@/api/Member/types";
import { onMounted, ref } from "vue";
import type { UserResponseData, UserArr, DoctorInfoData } from "@/api/Hospital/types";
import { useRoute, useRouter } from "vue-router";
//@ts-ignore
import { ElMessage } from "element-plus";
import type { ComponentSize } from 'element-plus';

const size = ref<ComponentSize>('default');

//获取路由对象
let $route = useRoute();
//存储医生的信息
let docInfo = ref<any>({});
//获取路由器对象
let $router = useRouter();

//存储用户确定就诊人索引值
let currentIndex = ref<number>(-1);
//存储全部就诊人信息
let userArr = ref<UserArr>([]);
//组件挂载完毕获取数据
onMounted(() => {
  //获取就诊人信息
  fetchUserData();
  //获取医生信息
  fetchInfo();
});
//获取就诊人信息
const fetchUserData = async () => {
  //获取就诊人信息:当前老师的这个账号下曾经已有四个就诊人信息
  //如果你是新的账号切记在已经写好的项目中先注册几个就诊人信息
  let result: UserResponseData = await reqGetUser();
  if (result.code == 200) {
    userArr.value = result.data;
  }
};
//获取医生的信息
const fetchInfo = async () => {
  let result: DoctorInfoData = await reqDoctorInfo($route.query.docId as string);
  if (result.code == 200) {
    docInfo.value = result.data;
  }
};

//点击就诊人子组件的的回调
const changeIndex = (index: number) => {
  //存储当前用户选中就诊人信息索引值
  currentIndex.value = index;
};

//确定挂号按钮的回调
const submitOrder = async () => {
  //医院编号
  let hoscode = docInfo.value.hoscode;
  //医生的ID
  let scheduleId = docInfo.value.id;
  //就诊人的ID
  let patientId = userArr.value[currentIndex.value].id;
  //提交订单
  let result: SubmitOrder = await reqSubmitOrder(hoscode, scheduleId, patientId);
  //提交订单成功
  if (result.code == 200) {
    $router.push({ path: "/user/orderDetail", query: { orderId: result.data } });
  } else {
    ElMessage({
      type: "error",
      message: result.message,
    });
  }
};

//预约挂号添加就诊人按钮的方法
const goUser = () => {
  //路由跳转
  $router.push({ path: '/user/patient', query: { type: 'add' } })
}
</script>

<style scoped lang="scss">
.p2 {

  .myApps {

    .card-header {
      display: flex; // 浮动到一行
      justify-content: space-between; // 垂直两边对齐
      align-items: center; // 水平居中对齐
    }

    .card-default {
      display: flex; // 浮动到一行
      flex-wrap: wrap; // 浮动换行显示

      .item {
        width: 32%;
        margin: 6px;
      }
    }
  }

  .myLink {
    width: 100%;

    .card-header {
      display: flex; // 浮动到一行
      justify-content: space-between; // 垂直两边对齐
      align-items: center; // 水平居中对齐
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    margin: 10px 0px;
  }
}

.el-descriptions {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 20px;
}
</style>
